import React, { useEffect, createRef } from 'react';
import styles from './variousIndustry.less';
import Pie3D from './common/Pie3D';

export default function Cicle() {
    const pieChart = createRef();
    let pieObject = null;
    let color = ['#23D3C0', '#F3DF52', '#EFA145', '#8DE155', '#6A8FFB', '#01ABDD'];
    const seriesData = [
        {
            'name': '有限责任公司 96.60%',
            'text': '有限责任公司',
            'value': 92415,
            'showLine': true,
            'showLabel': true,
            'labelColor': '#01FFFC',
            'lineSegment1': 1,
            'lineSegment2': 1,
            'fontSize': 24,
            'height': 0.1,
            'cursorHeight': 0.2,
            'ratio': '96.60%',
            'info': {
                'cancellationNum': 101,
                'cancellationRatio': '0.11%',
                'existenceNum': 92113,
                'existenceRatio': '96.28%',
                'otherNum': 10,
                'otherRatio': '0.01%',
                'revokeNum': 191,
                'revokeRatio': '0.20%'
            }
        },
        {
            'name': '其他 1.54%',
            'text': '其他',
            'value': 1476,
            'showLine': true,
            'showLabel': true,
            'labelColor': '#01FFFC',
            'lineSegment1': 1,
            'lineSegment2': 1,
            'fontSize': 24,
            'height': 0.1,
            'cursorHeight': 0.2,
            'ratio': '1.54%',
            'info': {
                'cancellationNum': 3,
                'cancellationRatio': '0.00%',
                'existenceNum': 1419,
                'existenceRatio': '1.48%',
                'otherNum': 1,
                'otherRatio': '0.00%',
                'revokeNum': 53,
                'revokeRatio': '0.06%'
            }
        },
        {
            'name': '分支机构 0.86%',
            'text': '分支机构',
            'value': 820,
            'showLine': true,
            'showLabel': true,
            'labelColor': '#01FFFC',
            'lineSegment1': 1,
            'lineSegment2': 1,
            'fontSize': 24,
            'height': 0.1,
            'cursorHeight': 0.2,
            'ratio': '0.86%',
            'info': {
                'cancellationNum': 91,
                'cancellationRatio': '0.10%',
                'existenceNum': 685,
                'existenceRatio': '0.72%',
                'otherNum': 0,
                'otherRatio': '0.00%',
                'revokeNum': 44,
                'revokeRatio': '0.05%'
            }
        },
        {
            'name': '股份有限公司 0.51%',
            'text': '股份有限公司',
            'value': 488,
            'showLine': true,
            'showLabel': true,
            'labelColor': '#01FFFC',
            'lineSegment1': 1,
            'lineSegment2': 1,
            'fontSize': 24,
            'height': 0.1,
            'cursorHeight': 0.2,
            'ratio': '0.51%',
            'info': {
                'cancellationNum': 0,
                'cancellationRatio': '0.00%',
                'existenceNum': 488,
                'existenceRatio': '0.51%',
                'otherNum': 0,
                'otherRatio': '0.00%',
                'revokeNum': 0,
                'revokeRatio': '0.00%'
            }
        },
        {
            'name': '个体工商户 0.44%',
            'text': '个体工商户',
            'value': 424,
            'showLine': true,
            'showLabel': true,
            'labelColor': '#01FFFC',
            'lineSegment1': 1,
            'lineSegment2': 1,
            'fontSize': 24,
            'height': 0.1,
            'cursorHeight': 0.2,
            'ratio': '0.44%',
            'info': {
                'cancellationNum': 161,
                'cancellationRatio': '0.17%',
                'existenceNum': 263,
                'existenceRatio': '0.27%',
                'otherNum': 0,
                'otherRatio': '0.00%',
                'revokeNum': 0,
                'revokeRatio': '0.00%'
            }
        },
        {
            'name': '个人独资企业 0.05%',
            'text': '个人独资企业',
            'value': 49,
            'showLine': true,
            'showLabel': true,
            'labelColor': '#01FFFC',
            'lineSegment1': 1,
            'lineSegment2': 1,
            'fontSize': 24,
            'height': 0.1,
            'cursorHeight': 0.2,
            'ratio': '0.05%',
            'info': {
                'cancellationNum': 6,
                'cancellationRatio': '0.01%',
                'existenceNum': 42,
                'existenceRatio': '0.04%',
                'otherNum': 1,
                'otherRatio': '0.00%',
                'revokeNum': 0,
                'revokeRatio': '0.00%'
            }
        }
    ];

    return (
        <div className={styles.pieBox} >
            <div className={styles.chartsBox}   >
                <Pie3D
                    className={styles.pie3D}
                    data={seriesData}
                    color={color}
                    scale={1.8}
                    tooltipBgColor="transparent"
                    labelGap={0.18}
                    tooltip={(() => {
                        let html = '';
                        return e => {
                            html = `<div class="Tooltip  pietip ">
                        <p >${e.text} <span class="blue">${e.value}</span> 家，<span class="blue">${e.ratio}</span>，其中：</p>
                        <p >存续企业：<span class="blue"> ${e ? e.info.existenceNum : 0}</span>家,<span class="blue"> ${e ? e.info.existenceRatio : 0}</span></p>
                        <p >吊销企业：<span class="blue"> ${e ? e.info.revokeNum : 0}</span>家,<span class="blue"> ${e ? e.info.revokeRatio : 0}</span></p>
                        <p >注销企业：<span class="blue"> ${e ? e.info.cancellationNum : 0}</span>家,<span class="blue"> ${e ? e.info.cancellationRatio : 0}</span></p>
                        <p >其他企业：<span class="blue"> ${e ? e.info.otherNum : 0}</span>家,<span  class="blue"> ${e ? e.info.otherRatio : 0}</span></p>
                        </div>
                        `;

                            return html;
                        };
                    })()}

                />
            </div>
        </div>
    );
}